<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>浏览-统计</title>

    <!-- Custom fonts for this template-->
    <link href="/static/admin-res/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="/static/admin-res/css/sb-admin-2.min.css" rel="stylesheet">

    <!-- Custom styles for this page -->
    <link href="/static/admin-res/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">

</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">

    <!-- 侧边栏 -->
    <ul th:replace="/commons/common-admin::sidebar(clickedOne='statistics',clickedTwo='view',collapseShow='true')"></ul>
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- 头部导航栏 -->
            <nav th:replace="/commons/common-admin::topbar"></nav>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="d-sm-flex align-items-center justify-content-between mb-4">
                    <h1 class="h3 mb-0 text-gray-800">数据统计 Summary of my blog</h1>
                    <a onclick="exportTable()" id="exportToExcel" href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
                            class="fas fa-download fa-sm text-white-50"></i>导出为Excel</a>
                </div>

                <!-- 数据统计概要 -->
                <div class="row" th:fragment="summary">

                    <!-- 浏览量统计 -->
                    <div class="col-xl-4 col-md-8 mb-4">
                        <div class="card border-left-primary shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2 text-center">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                            浏览量</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${statNum.get('viewNum')}"></div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-calendar fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                    <!-- 日志统计 -->
                    <div class="col-xl-4 col-md-8 mb-4">
                        <div class="card border-left-primary shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2 text-center">
                                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                            日志数</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${statNum.get('logNum')}"></div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 留言统计 -->
                    <div class="col-xl-4 col-md-8 mb-4">
                        <div class="card border-left-warning shadow h-100 py-2">
                            <div class="card-body">
                                <div class="row no-gutters align-items-center">
                                    <div class="col mr-2 text-center">
                                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                            留言数</div>
                                        <div class="h5 mb-0 font-weight-bold text-gray-800" th:text="${statNum.get('commentNum')}"></div>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-comments fa-2x text-gray-300"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--浏览统计表-->
                <div class="card shadow mb-4" >
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">浏览量统计表</h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" th:fragment="table">
                            <table class="table table-bordered text-center" id="dataTable" width="100%" cellspacing="0" >
                                <thead>
                                <tr class="thead">
                                    <th class="align-middle">ID</th>
                                    <th class="align-middle">访问IP</th>
                                    <th class="align-middle">访问时间</th>
                                </tr>
                                </thead>
                                <tfoot>
                                <tr class="tfoot">
                                    <th class="align-middle">id</th>
                                    <th class="align-middle">访问ip</th>
                                    <th class="align-middle">访问时间</th>
                                </tr>
                                </tfoot>
                                <tbody>
                                <tr th:each="sysView:${sysViews}">
                                    <td class="align-middle" th:text="${sysView.getId()}"></td>
                                    <td class="align-middle" th:text="${sysView.getIp()}"></td>
                                    <td class="align-middle" th:text="${#dates.format(sysView.getCreateBy(),'yyyy-MM-dd HH:mm:ss')}"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- End of Main Content -->

        <!-- 页脚 -->
        <footer th:replace="/commons/common-admin::footer"></footer>
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- 退出登录-->
<div th:replace="/commons/common-admin::logout"></div>

<script>
    function exportTable() {
        $("#dataTable").table2excel({
            exclude: ".tfoot",
            name: "Excel Document Name",
            filename: "浏览量统计表",
            fileext: ".xls",
            columns: "0",//指定不导出列 实例：columns: "0,1,2,3",下标从0开始，代表不导出第一列--第四列
            exclude_img: false,
            exclude_links: false,
            exclude_inputs: false
        });
    }
    //      table2excel插件的可用配置参数有：
    //
    //            exclude：不被导出的表格行的CSS class类。
    //            name：导出的Excel文档的名称。
    //            filename：Excel文件的名称。
    //            exclude_img：是否导出图片。
    //            exclude_links：是否导出超链接
    //            exclude_inputs：是否导出输入框中的内容。
</script>

<!-- Bootstrap core JavaScript-->
<script src="/static/admin-res/vendor/jquery/jquery.min.js"></script>
<script src="/static/admin-res/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="/static/admin-res/vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="/static/admin-res/js/sb-admin-2.min.js"></script>

<!-- Page level plugins -->
<script src="/static/admin-res/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/static/admin-res/vendor/datatables/dataTables.bootstrap4.min.js"></script>

<!-- Page level custom scripts -->
<script src="/static/admin-res/js/demo/datatables-demo.js"></script>

<!--jquery2table-->
<script src="/static/admin-res/js/t2e/jquery.table2excel.min.js"></script>
</body>

</html>